//------tools-----
(function(){
	var Tools={
	getRandom:function(max,min){
		return Math.floor(Math.random()*(max-min+1))+min;
	}
}
	window.Tools=Tools;
})();
//------food-----
;(function(){
	var position='absolute';
//记录创建的元素,为删除做准备
var elements=[];
//创建食物对象
function Food (options){
	options=options||{};
	this.width=options.width||20;
	this.height=options.height||20;
	this.color=options.color||'red';
	this.x=options.x||0;
	this.y=options.y||0;
}
//渲染
var position='absolute';
Food.prototype.render=function(map){
	remove();
	//随机生成食物的物质
	this.x=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width;
	this.y=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height;
	//动态创建一个div
	var div=document.createElement('div');
	map.appendChild(div);
	elements.push(div);
	div.style.width=this.width+'px';
	div.style.height=this.height+'px';
	div.style.position = position;
	div.style.left=this.x+'px';
	div.style.top=this.y+'px';
	div.style.backgroundColor=this.color;
}
function remove(){
	for (var i=elements.length-1;i>=0;i-- ){
		//删除页面中的div
		elements[i].parentNode.removeChild(elements[i]);
		//删除数组中的div
		elements.splice(i,1);
	}
}
window.Food=Food;
})()

//--------snake---------
;(function(){
	var position='absolute';
	var elements=[];
	//创建蛇对象
	function Snake(options){
		options=options||{};
		this.width=options.width||20;
		this.height=options.height||20;
		this.direction=options.direction||'right';
		this.body=[
			//蛇头
			{x:3,y:2,color:'red'},
			//蛇身
			{x:2,y:2,color:'blue'},
		    //蛇尾
		    {x:1,y:2,color:'blue'}
		]
	}
	Snake.prototype.render=function(map){
		remove();
		//把每一个蛇节渲染到地图上
		for(var i=0,len=this.body.length;i<len;i++){
			var obj=this.body[i];
		var div=document.createElement('div');
		map.appendChild(div);
		elements.push(div);
		div.style.width=this.width+'px';
		div.style.height=this.height+'px';
		div.style.position=position;
		div.style.left=obj.x*this.width+'px';
		div.style.top=obj.y*this.height+'px';
		div.style.backgroundColor=obj.color;
	}
		
	}
	function remove(){
		for(var i=elements.length-1;i>=0;i--){
			elements[i].parentNode.removeChild(elements[i]);
			elements.splice(i,1);
		}
	}
	
	Snake.prototype.move=function(food,map){
		//移动蛇的身体,让当前蛇节,到上一个蛇节的位置
		for (var i=this.body.length-1;i>0;i--){
			this.body[i].x=this.body[i-1].x;
			this.body[i].y=this.body[i-1].y
		}
		//控制蛇头的移动,判断蛇头的方向
		var head=this.body[0];
		switch(this.direction){
			case 'right':
				head.x+=1;
				break;
			case 'left':
				head.x-=1;
				break;
			case 'top':
				head.y-=1;
				break;
			case 'bottom':
				head.y+=1;
				break;
		}
		//判断蛇头是否和食物重合
		var headX=head.x*this.width;
		var headY=head.y*this.height;
		if(headX===food.x&&headY===food.y){
			var last=this.body[this.body.length-1];
			this.body.push({
				x:last.x,
				y:last.y,
				color:last.color
			})
			food.render(map);
	}
		}
		
	window.Snake=Snake;
	
})()
 //------game-----------
 //创建自调用函数,避免命名冲突
;(function(){
	var that;
	function Game(map){
	this.food=new Food();
	this.snake=new Snake();
	this.map=map;
	that=this;
}
//把蛇对象和食物对象渲染到map上
Game.prototype.start=function(){
	this.food.render(this.map);
	this.snake.render(this.map);
	runSnake();
	bindKey();
}
function bindKey(){
	document.addEventListener('keydown',function(e){
		switch (e.keyCode){
			case 37:
			that.snake.direction='left';
			break;
			case 38:
			that.snake.direction='top';
			break;
			case 39:
			that.snake.direction='right';
			break;
			case 40:
			that.snake.direction='bottom';
			break;
		}
	},false)
}
function runSnake(){
	var timer=setInterval(function(){
	that.snake.move(that.food,that.map);
	that.snake.render(that.map);
	//当蛇遇到边界游戏结束
	//获取蛇头的坐标
	var maxX=that.map.offsetWidth/that.snake.width-1;
	var maxY=that.map.offsetHeight/that.snake.height-1;
	var headX=that.snake.body[0].x;
	var headY=that.snake.body[0].y;
	if(headX<=0||headX>=maxX){
		clearInterval(timer);
		setTimeout(function(){
			alert('gameover')
		},100)
	}

	if(headY<=0||headY>=maxY){
		clearInterval(timer);
		setTimeout(function(){
			alert('gameover');
		},100)
	}
	},300)
	
}
window.Game=Game;
})();
//--------调用--------
;(function (){
var map=document.getElementById('map');
var game=new Game(map);
game.start();
})()

